<template>
  <div class="learning-resources-page" align="center">
    <!-- 语言选择 -->
    <div class="language-select">
      <a-select v-model="selectedLanguage" placeholder="选择编程语言" style="width:200px">
        <a-option key="all" :value="''">所有语言</a-option>
        <a-option v-for="lang in languages" :key="lang" :value="lang">{{ lang }}</a-option>
      </a-select>
    </div>

    <!-- 调试信息 -->
    <div class="debug-info" style="margin-bottom:16px;">
      已选语言：<strong>{{ selectedLanguage || '所有' }}</strong>；
      路线数量：<strong>{{ filteredRoutes.length }}</strong>，
      资源数量：<strong>{{ filteredResources.length }}</strong>
    </div>

    <div class="sections">
      <!-- 推荐学习路线 -->
      <a-card title="推荐学习资源✨" class="section-card">
<!--        <a-list :data="filteredRoutes" bordered>-->
<!--          <template #header>-->
<!--            <div>学习路线 ({{ selectedLanguage || '所有' }})</div>-->
<!--          </template>-->
<!--          <template #renderItem="{ item, index }">-->
<!--            <a-list-item>-->
<!--              <div class="item-title">{{ index + 1 }}. {{ item.title }}</div>-->
<!--              <div class="item-desc">{{ item.description }}</div>-->
<!--            </a-list-item>-->
<!--          </template>-->
<!--        </a-list>-->
        <a-list bordered>
          <a-list-item v-for="(item, index) in filteredResources" :key="index">
            <a :href="item.url" target="_blank" class="resource-link">{{ item.name }}</a>
            <div class="item-desc">{{ item.description }}</div>
          </a-list-item>
        </a-list>

      </a-card>

      <!-- 推荐学习资源 -->
      <a-card title="推荐学习路线💡" class="section-card">
<!--        <a-list :data="filteredResources" bordered>-->
<!--          <template #header>-->
<!--            <div>资源列表 ({{ selectedLanguage || '所有' }})</div>-->
<!--          </template>-->
<!--          <template #renderItem="{ item }">-->
<!--            <a-list-item>-->
<!--              <a :href="item.url" target="_blank" class="resource-link">{{ item.name }}</a>-->
<!--              <div class="item-desc">{{ item.description }}</div>-->
<!--            </a-list-item>-->
<!--          </template>-->
<!--        </a-list>-->
        <a-list bordered>
          <a-list-item v-for="(item, index) in filteredRoutes" :key="index">
            <div class="item-title">{{ index + 1 }}. {{ item.title }}</div>
            <div class="item-desc">{{ item.description }}</div>
          </a-list-item>
        </a-list>

      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { Select, Option, Card, List } from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';

interface Route { language: string; title: string; description: string; }
interface Resource { language: string; name: string; url: string; description: string; }

// 可选编程语言
const languages = ['JavaScript', 'Python', 'Java'];
const selectedLanguage = ref<string>('');

// 学习路线数据
const learningRoutes = ref<Route[]>([
  // JavaScript 路线
  { language: 'JavaScript', title: '基础语法和DOM操作', description: '学习JS基本语法，理解变量、函数、DOM操作和事件处理。' },
  { language: 'JavaScript', title: 'ES6及以上新特性', description: '深入学习ES6模块、箭头函数、Promise、async/await等。' },
  { language: 'JavaScript', title: '框架入门', description: '选择Vue3或React入门，理解组件、路由、状态管理。' },
  { language: 'JavaScript', title: '项目实战', description: '通过小项目实践，如Todo应用或博客系统，提升综合能力。' },
  // Python 路线
  { language: 'Python', title: '基础语法和数据结构', description: '学习Python基本语法，掌握列表、字典、集合等。' },
  { language: 'Python', title: '函数编程和模块', description: '掌握函数定义、模块和包的使用，熟悉常用标准库。' },
  { language: 'Python', title: 'Web开发', description: '学习Flask或Django，理解路由、模板、ORM。' },
  { language: 'Python', title: '数据分析与机器学习', description: '掌握pandas、NumPy，并了解scikit-learn基础。' },
  // Java 路线
  { language: 'Java', title: 'JavaSE基础', description: '学习Java基本语法、面向对象编程、集合框架。' },
  { language: 'Java', title: 'JavaWeb基础', description: '搭建Servlet/JSP环境，理解MVC和Tomcat。' },
  { language: 'Java', title: 'Spring生态', description: '学习Spring Boot、Spring MVC、Spring Data等。' },
  { language: 'Java', title: '微服务与项目实战', description: '掌握Spring Cloud或Dubbo，完成微服务架构项目。' },
]);

// 学习资源数据
const learningResources = ref<Resource[]>([
  // JavaScript 资源
  { language: 'JavaScript', name: '菜鸟编程', url: 'https://www.runoob.com/', description: '丰富的JavaScript教程及在线实例。' },
  { language: 'JavaScript', name: 'MDN Web 文档', url: 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript', description: '权威的JS文档和指南。' },
  { language: 'JavaScript', name: 'JavaScript.info', url: 'https://zh.javascript.info/', description: '深入浅出的JavaScript教程。' },
  // Python 资源
  { language: 'Python', name: '菜鸟编程', url: 'https://www.runoob.com/python3/python3-tutorial.html', description: 'Python入门教程，包含示例和练习。' },
  { language: 'Python', name: '廖雪峰Python教程', url: 'https://www.liaoxuefeng.com/wiki/1016959663602400', description: '系统全面的Python学习教程。' },
  { language: 'Python', name: 'Python官方文档', url: 'https://docs.python.org/zh-cn/3/', description: '完整的官方参考文档。' },
  // Java 资源
  { language: 'Java', name: '菜鸟编程', url: 'https://www.runoob.com/java/java-tutorial.html', description: 'Java基础教程及实例。' },
  { language: 'Java', name: '廖雪峰Java教程', url: 'https://www.liaoxuefeng.com/wiki/1252599548343744', description: '深入浅出的Java教程。' },
  { language: 'Java', name: 'Java官方文档', url: 'https://docs.oracle.com/javase/8/docs/', description: 'Oracle官方Java文档与教程。' },
]);

// 根据选择语言过滤数据
const filteredRoutes = computed(() =>
  selectedLanguage.value
    ? learningRoutes.value.filter(r => r.language === selectedLanguage.value)
    : learningRoutes.value
);
const filteredResources = computed(() =>
  selectedLanguage.value
    ? learningResources.value.filter(r => r.language === selectedLanguage.value)
    : learningResources.value
);
</script>

<style scoped>
.learning-resources-page {
  padding: 24px;
}
.language-select {
  margin-bottom: 24px;
}
.debug-info {
  font-size: 14px;
  color: #444;
}
.sections {
  display: flex;
  gap: 24px;
}
.section-card {
  flex: 1;
}
.item-title {
  font-weight: bold;
}
.item-desc {
  color: #666;
  margin-top: 4px;
}
.resource-link {
  font-weight: bold;
  font-size: 16px;
}
</style>
